<style lang="less" scoped>
  .surgery-PCI{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      text-align: center;
      color: #00F6FF;
      line-height: 40px;
      margin-bottom: 5px;
    }
    &_content{
      height: calc(100% - 45px);
    }
  }
</style>

<template>
  <div class="surgery-PCI">
    <div class="surgery-PCI_title">
      <span>不同操作的手术例数</span>
    </div>
    <div id="surgeryPCI" class="surgery-PCI_content" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getPCIOperationsNum, getStrokeOperationsNum } from '@/api/comprehensive/surgeryPCI'
export default {
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      setInter: null
    }
  },
  watch: {
    'isStrock'() {
      this.init()
    }
  },
  mounted() {
    this.init()
    this.setInter = setInterval(() => {
      this.init()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.setInter)
  },
  methods: {
    init() {
      let myChart = echarts.init(document.getElementById('surgeryPCI'))
      // myChart.clear()
      myChart.showLoading({
        text: '',
        fontSize: 18,
        left: 'center',
        color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
        textColor: '#fff', // 文字颜色
        maskColor: 'rgba(255, 255, 255, 0)' // 背景色
      })
      window.addEventListener('resize', myChart.resize)
      if (this.isStrock == 'chestPain') {
        getPCIOperationsNum({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data) {
              let PCIData = [
                res.data.numStentImplantation ? res.data.numStentImplantation : 0,
                res.data.numIntracoronaryThrom ? res.data.numIntracoronaryThrom : 0,
                res.data.numThrombusAspiration ? res.data.numThrombusAspiration : 0,
                res.data.numPTCA ? res.data.numPTCA : 0
              ]
              let option = {
                tooltip: {
                  trigger: 'axis'
                },
                radar: {
                  center: ['50%', '50%'],
                  radius: '70%',
                  // splitLine: {
                  //   show: true,
                  //   lineStyle: {
                  //     color: ['#10dee6']
                  //   }
                  // },
                  indicator: [
                    { name: '植入支架' + ' ' + res.data.numStentImplantation + '例', max: 20, color: '#fff' },
                    { name: '冠脉内溶栓' + ' ' + res.data.numIntracoronaryThrom + '例', max: 20, color: '#fff' },
                    { name: '血栓抽吸' + ' ' + res.data.numThrombusAspiration + '例', max: 20, color: '#fff' },
                    { name: 'PTCA' + ' ' + res.data.numPTCA + '例', max: 20, color: '#fff' }
                  ]
                },
                series: [
                  {
                    name: 'PCI不同操作的手术例数',
                    type: 'radar',
                    itemStyle: {
                      color: '#10dee6'
                    },
                    lineStyle: {
                      color: '#10dee6'
                    },
                    areaStyle: {
                      color: ['#10dee6'],
                      opacity: 0.5
                    },
                    tooltip: {
                      trigger: 'item'
                    },
                    data: [
                      {
                        value: PCIData,
                        name: '手术例数'
                      }
                    ]
                  }
                ]
              }
              myChart.setOption(option)
            } else {
              myChart.showLoading({
                text: '暂无数据',
                fontSize: 18,
                left: 'center',
                color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
                textColor: '#fff', // 文字颜色
                maskColor: 'rgba(255, 255, 255, 0)' // 背景色
              })
            }
          }
        })
      } else if (this.isStrock == 'stroke') {
        getStrokeOperationsNum({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data) {
              let arrData = []
              arrData = [{
                value: res.data.numThrom ? res.data.numThrom : 0,
                name: '静脉溶栓'
              }, {
                value: res.data.numIntervention ? res.data.numIntervention : 0,
                name: '血管内治疗'
              }]
              let option = {
                color: ['#36CACA', '#3A9FFF'],
                legend: {
                  type: 'scroll',
                  textStyle: {
                    color: '#fff'
                  },
                  left: '30%',
                  bottom: 0
                },
                series: [
                  {
                    type: 'pie',
                    radius: '50%',
                    data: arrData,
                    label: {
                      show: true,
                      position: 'outside',
                      formatter: '{b}: {d}'
                    },
                    emphasis: {
                      itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
              }
              myChart.setOption(option)
            } else {
              myChart.showLoading({
                text: '暂无数据',
                fontSize: 18,
                left: 'center',
                color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
                textColor: '#fff', // 文字颜色
                maskColor: 'rgba(255, 255, 255, 0)' // 背景色
              })
            }
          }
        })
      }
    }
  }
}
</script>
